import Image from "next/image";
import React, { useCallback } from "react";
import { ProductBlockPropsDefault } from "./mock";
import { globalImage } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import ButtonAtom from "../../Atoms/Button.Atom";
import ButtonAtomEnum from "../../Atoms/Button.Atom/enum";
import { ProductBlockProps } from "./type";
import useCartStore from "@/business.InterfaceLayer/hooks/store/localstorage/useCartStore";
import WishlistButtonMolecule from "../../Molecules/WishlistButton.molecule";
import Link from "next/link";
import SkeletonAtom from "../../Atoms/Skeleton.Atom";
import { useTranslation } from "react-i18next";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";

const ProductBlock: React.FC<ProductBlockProps> = (props) => {
  const { t } = useTranslation();
  const { title, brand, price, img_paths, colors, id, isLoading } = props;

  const { addItem } = useCartStore();

  const priceAsNumber = React.useMemo(
    () => (typeof price === "number" ? price : parseFloat(price || "0")),
    [price]
  );

  const handleAddToCart = useCallback(() => {
    const newItem = {
      id: id,
      title: title,
      price: price,
      img_paths: img_paths,
      colors: colors,
      quantity: 1,
      sum: 0,
      isSelected: false,
    };
    addItem(newItem);
  }, [addItem, colors, id, img_paths, price, title]);

  return (
    <>
      {isLoading ? (
        <SkeletonAtom />
      ) : (
        <Link
          href={`/product/${id}`}
          target="_blank"
          className="grid grid-cols-[minmax(0,auto)] grid-rows-[auto auto auto minmax(0,100%)] p-6 bg-bgGen shadow-3xl rounded-lg flex flex-col h-full text-textColor"
        >
          <div className="overflow-hidden	">
            <div className="rounded-md w-full h-[calc(100%+15px)] relative pb-4">
              <div className="absolute right-0 z-10">
                <WishlistButtonMolecule
                  title={title}
                  brand={brand}
                  price={price}
                  img_paths={img_paths}
                  colors={colors}
                  id={id}
                />
              </div>
              <Image
                className={`${globalImage}`}
                src={`/img/${img_paths}.png`}
                width={1200}
                height={720}
                alt={title || "image"}
                priority={false}
                loading="lazy"
              />
            </div>
          </div>
          <TextAtom
            type={TextAtomEnum.enum_h3}
            className="font-light text-tiffany mt-1 mb-2"
          >
            {brand}
          </TextAtom>
          <TextAtom
            type={TextAtomEnum.enum_h4}
            className="font-medium h-[40px] overflow-hidden"
          >
            {title}
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h4} className="font-bold mb-2">
            {priceAsNumber?.toLocaleString()} ₽
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h5} className="font-medium mb-2">
            {colors}
          </TextAtom>
          <ButtonAtom
            type={ButtonAtomEnum.enum_butButton}
            onClick={handleAddToCart}
          >
            {t("ProductBlock.button")}
          </ButtonAtom>
        </Link>
      )}
    </>
  );
};

ProductBlock.defaultProps = ProductBlockPropsDefault;
export default React.memo(ProductBlock);
